<template>
  <basic-container>
    <avue-tree :option="option" :data="data" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
      <span class="el-tree-node__label" slot-scope="{ node, data }">
        <span>
          <i class="el-icon-user-solid"></i>
          {{data.label}}
        </span>
      </span>
      <template slot-scope="scope" slot="menu">
        <div class="avue-tree__item" @click.native="tip(scope.node,scope.data)">自定义按钮</div>
      </template>
    </avue-tree>
  </basic-container>
</template>

<script>
export default {
  data () {
    return {
      form:{},
      data:[
        {
          value:0,
          label:'一级部门',
          children:[
            {
              value:1,
              label:'一级部门1',
            },{
              value:2,
              label:'一级部门2',
            }
          ]
        },{
          value:3,
          label:'二级部门',
          children:[
            {
              value:4,
              label:'二级部门1',
            },{
              value:5,
              label:'二级部门2',
            }
          ]
        }
      ],
      option:{
        title:'我是标题',
        defaultExpandAll:true,
        formOption:{
          labelWidth:100,
          column:[{
            label:'自定义项',
            prop:'test'
          }],
        },
        props:{
          labelText:'标题',
          label:'label',
          value:'value',
          children:'children'
        }
      }
    }
  },
  methods:{
    tip(node,data){
      this.$message.success(JSON.stringify(data))
    },
    del(data,done){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除回调')
        done();
      }).catch(() => {
        this.$message({
          customClass:'zZindex',
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    update(data,done,loading){
      this.$message.success('更新回调')
      done();
    },
    save(data,done,loading){
      this.$message.success('新增回调')
      this.form.id = new Date().getTime();
      this.form.value=new Date().getTime();
      this.form.children=[];
      done();
    },
    nodeClick(data){
      this.$message.success(JSON.stringify(data))
    }
  }
}
</script>